import React, { useState } from 'react';
import type { Tab } from '../types';
import TabItem from './TabItem';
import { useAuth } from '../context/AuthContext';

interface TabsProps {
  tabs: Tab[];
  activeTabId?: string;
  onTabClick: (tab: Tab) => void;
  onAddTab: () => void;
  onDeleteTab: (tabId: string) => void;
  onTabUpdate: (tabName: string) => void;
}

const Tabs: React.FC<TabsProps> = ({ tabs, activeTabId, onTabClick, onTabUpdate, onAddTab, onDeleteTab }) => {
  const [isExpanded, setIsExpanded] = useState(true);
  const { logout } = useAuth();


  return (
    <div style={{
      position: 'fixed',
      left: isExpanded ? '0' : '-200px',
      top: '36px',
      zIndex: 1000,
      transition: 'left 0.3s ease',
      fontSize: '14px',
      boxShadow: '0 1px 4px rgba(0, 0, 0, 0.2)',
      borderRadius: '0 8px 8px 0',
      border: '1px solid #4299e1ad',
      backgroundColor: 'white',
    }}>
      {/* 展开/收缩按钮 */}
      <div
        onClick={() => setIsExpanded(!isExpanded)}
        style={{
          position: 'absolute',
          right: '-30px',
          top: '20px',
          padding: '6px 10px',
          backgroundColor: '#4299e1',
          color: 'white',
          border: 'none',
          cursor: 'pointer',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1001,
          borderRadius: '0 40% 40% 0',
          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'

        }}
      >
        {isExpanded ? '<' : '>'}
      </div>

      {/* 标签列表 */}


      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          padding: '10px',
          width: '200px',
          overflow: 'hidden',
          height: '100%',
          boxSizing: 'border-box'
        }}
      >
        {tabs.map(tab => (
          <TabItem
            key={tab.id}
            tab={tab}
            isActive={tab.id === activeTabId}
            onClick={() => onTabClick(tab)}
            onDoubleClick={() => onTabUpdate(tab.name)}
            onDelete={() => {
              if (tab.name !== '默认标签') {
                onDeleteTab(tab.id);
              }
            }}
            isDefault={tab.name === '默认标签'}
          />
        ))}

        <div style={{ flexGrow: 1 }}></div>

        <button
          onClick={onAddTab}
          className='tab-item'
          style={{
            marginTop: '10px',
            border: 'none',
            backgroundColor: "#4299e1",
            color: "white"
          }}
        >
          + 添加标签
        </button>

        <a className="logout" onClick={() => {
          logout()
        }}>
          退出登录
        </a>
      </div>
    </div>
  );
};

export default Tabs;